/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-03-30 09:50:47
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-06 21:52:17
 */
import React,{ useState } from 'react';
import { Table, Input , Space,ConfigProvider,Button  } from 'antd';
import { FormOutlined,DeleteTwoTone,DownOutlined,PlusCircleOutlined,UpOutlined } from '@ant-design/icons';
// 引入国际化 默认中文文案
import zhCN from 'antd/lib/locale/zh_CN';
import SearchBox from '../../components/goods/searchBox/SearchBox';

import Provider from '../../components/goods/providerManage/Provider';




 
const ProviderManage = () => {

const [isSearchBoxShow, setIsSearchBoxShow] = useState(false);
 // 显示隐藏高级搜索功能函数
 const changeSearchStatus = () =>{
  setIsSearchBoxShow(!isSearchBoxShow)
}


// table渲染表头 行数据
const data = [
  {
    key: '1',
    condition: '已合作',
    provider: "1",
    contact: 'New',
    telephone: '11156211',
    phone:'12311564522',
    QQ:'995622478',
    city:"",
    address:"",
    remark:"",
    date:"2022/3/30 15:34:56",
    manage:""
  },
  {
    key: '2',
    condition: '已合作',
    provider: "淘宝",
    contact: 'c',
    telephone: '11122331',
    phone:'12318964522',
    QQ:'895622478',
    city:"",
    address:"",
    remark:"",
    date:"2022/3/30 12:35:50",
    manage:""
  },
  {
    key: '3',
    condition: '已合作',
    provider: "京东",
    contact: '联系人',
    telephone: '11122211',
    phone:'12313364522',
    QQ:'785622478',
    city:"",
    address:"",
    remark:"",
    date:"2017/1/6 22:23:13",
    manage:""
  },
];

  // table渲染表头 列数据
const columns = [
  {
    title: '合作情况',
    dataIndex: 'condition',
    key: 'condition',
    align:'center',
  //   render: text => <a>{text}</a>,
  },
  {
    title: '供应商名称',
    dataIndex: 'provider',
    key: 'provider',
    align:'center',
  },
  {
    title: '联系人',
    dataIndex: 'contact',
    key: 'contact',
    align:'center',
  },
  {
    title: '电话',
    key: 'telephone',
    dataIndex: 'telephone',
    align:'center',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    align:'center',
  },
  {
      title: 'QQ',
      dataIndex: 'QQ',
      key: 'QQ',
      align:'center',
  },
  {
      title: '省份/城市',
      key: 'action',
      align:'center',
  },
  {
      title: '地址',
      dataIndex: 'city',
      key: 'city',
      align:'center',
  },
  {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      align:'center',
  },
  {
      title: '添加时间',
      dataIndex: 'date',
      key: 'date',
      align:'center',
  },
  {
      title: '管理',
      dataIndex: 'manage',
      key: 'manage',
      align:'center',
      render:(text,category)=><Space>
      <FormOutlined style={{cursor:"pointer",color:"#427DD0"}} onClick={()=>handlerModify(category)} />
      <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={(category)=>handlerDelete()} />
      </Space>,
  },
];

// 点击修改  获取行内内容
const [content, setContent] = useState();

// 点击修改按钮的事件处理函数
const handlerModify = (category) =>{
  setIsModalModifyVisible(true)
  setContent(category)
}
// 点击取消按钮的事件处理函数
const handlerDelete = (category) =>{
  console.log('delete');
}


// 新增供应商Modal框 的数据
const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
// 点击 新增供应商的按钮 功能函数
const showModal = () => {
  setIsModalVisible(true);
};

// 修改供应商Modal框 的值
const [isModalModifyVisible, setIsModalModifyVisible] = useState(false);

const handleModifyOk = () => {
  setIsModalModifyVisible(false);
};

const handleModifyCancel = () => {
  setIsModalModifyVisible(false);
};

    return (
        <div>
            <ConfigProvider locale={zhCN}>

                        {/* 新增供应商模态框 */}

                        <Provider title='新增供应商' visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} />

                        {/* 修改供应商模态框 */}
                        <Provider content={content} title='修改供应商' visible={isModalModifyVisible} onOk={handleModifyOk} onCancel={handleModifyCancel} />

                        {/* 表头管理按钮 */}

                        <Space align="center" style={{ display: 'flex',justifyContent:"space-between",height:"40px",lineHeight:"40px" }}>
                            <Space>
                                <Button type="danger">供应商列表</Button>
                                <Button type="primary" icon={<PlusCircleOutlined />} onClick={()=>showModal()}>新增供应商</Button>
                            </Space>
                       
                        {/* 多条件搜索 */}
                            <Space>
                                <Input style={{width:"240px"}} placeholder="供应商、联系人、手机号" />
                                    <Button type="primary">搜索</Button>
                                    <Button type="danger" onClick={()=>{
                                      changeSearchStatus()
                                    }}>
                                    Button {isSearchBoxShow === true ? <UpOutlined /> :<DownOutlined />}
                                    </Button>
                            </Space>
                        </Space>

                         {/* 隐藏高级搜索框 */}

                         {isSearchBoxShow && <SearchBox />}

                        {/* 表单部分 */}
                    <Table
                    columns={columns}
                    dataSource={data}
                    bordered
                    pagination={
                        {
                            total:data.length,
                            defaultPageSize:5,
                            pageSizeOptions:[5,10,20],
                            showSizeChanger:true,
                            showQuickJumper:true,
                            showTotal: total=> `总共 ${total}条`,
                            showLessItems:true,
                        }
                     }
                     /> 
            </ConfigProvider>
        </div>
    );
}

export default ProviderManage;
